$blue: #f6f6f6;

.breadcrumb {
  height: 30px;
  cursor: default;
  display: flex;
  padding-left: 10px;
  border-bottom: 1px solid #cccccc;
  color: #666666;
  background-color: $blue;
  &.h0 {
    height: 0;
  }
  .crumb {
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 16px;
    position: relative;
  }
  .crumb:before, .crumb:after {
    display: block;
    content: '';
    border: solid transparent;
    border-right: none;
  }
  .crumb:before {
    position: absolute;
    right: 0;
    top: -1px;
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 9px;
    border-left-color: #888888;
  }
  .crumb:after {
    position: absolute;
    right: 1px;
    top: 0;
    border-top-width: 15px;
    border-bottom-width: 15px;
    border-left-width: 8px;
    border-left-color: $blue;
  }
}

.duration {
  transition-duration: 200ms;
}
